<template>
  <el-dialog
    title="查看"
    :visible.sync="visible"
    :show-close="false"
    width="900px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click.stop="cancelModal">
      <i class="el-dialog__close el-icon el-icon-close"></i>
    </button>
    <el-form
      class="form-wrapper"
      ref="orderForm"
      :model="orderForm"
      :rules="addRules"
      label-width="110px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="单据编号">
            <el-input
              :disabled="true"
              style="width:180px;"
              v-model="orderForm.djbh"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期">
            <el-date-picker
              :disabled="true"
              style="width:180px;"
              value-format="yyyy-MM-dd"
              v-model="orderForm.rq"
              type="date"
              placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原单据号">
            <el-input
              :disabled="true"
              style="width:180px;"
              v-model="orderForm.ydjh"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="渠道" prop="qddm">
            <el-select
              style="width:180px;"
              :disabled="true"
              v-model="orderForm.qddm"
              @change="qdchange"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in qdlist"
                :key="item.code"
                :label="item.name+'['+ item.code +']'"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门店/客户" prop="khdm">
            <el-select
              :disabled="true"
              style="width:180px;"
              v-model="orderForm.khdm"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in khlist"
                :key="item.code"
                :label="item.name+'['+ item.code +']'"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款类型" prop="sklxDm">
            <el-select
              style="width:180px;"
              :disabled="true"
              v-model="orderForm.sklxDm"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in sklxlist"
                :key="item.code"
                :label="item.name+'['+ item.code +']'"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订货会" prop="dhhdm">
            <el-select
              style="width:180px;"
              :disabled="true"
              v-model="orderForm.dhhdm"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in dhhlist"
                :key="item.code"
                :label="item.name+'['+ item.code +']'"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="分账信息" prop="fzxx">
            <el-select
              style="width:180px;"
              :disabled="true"
              v-model="orderForm.fzxx"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in fzxxlist"
                :key="item.code"
                :label="item.name+'['+ item.code +']'"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单据状态" prop="status">
            <el-select
              style="width:180px;"
              :disabled="true"
              v-model="orderForm.status"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in orderstatuslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- </el-form-item> -->
        </el-col>
      </el-row>
      <el-tabs v-model="activeName">
        <el-tab-pane label="详细信息" name="first">
          <el-table :data="tableDatadetail" style="width: 100%">
            <el-table-column label="编号" type="index" width="50"></el-table-column>
            <el-table-column prop="je" label="应收金额"> <template slot-scope="scope">{{scope.row.je|NumberSet}}</template></el-table-column>
          <el-table-column
            prop="ycje"
            label="已冲金额"
            >
             <template slot-scope="scope">{{scope.row.ycje|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="wcje"
            label="未冲金额">
             <template slot-scope="scope">{{scope.row.wcje|NumberSet}}</template>
          </el-table-column>
          <el-table-column
            prop="yyje"
            label="已用金额">
             <template slot-scope="scope">{{scope.row.yyje|NumberSet}}</template>
          </el-table-column>
            <el-table-column prop="bz" label="摘要"></el-table-column>
          </el-table>
          <div style="display: flex;justify-content: flex-end">
            <el-pagination
              background
              @size-change="sizeChange"
              @current-change="currentChange"
              layout="sizes, prev, pager, next, jumper, ->, total, slot"
              :total="detaildata.total"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second">
          <el-row>
            <el-col :span="12">
              <el-form-item label="创建人：">
                <el-input style="width:180px;" v-model="orderForm.zdr" type="text" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.zdrq"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="修改人：">
                <el-input style="width:180px;" v-model="orderForm.xgr" type="text" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="修改时间：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.xgrq"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="提交人：">
                <el-input style="width:180px;" v-model="orderForm.tjr" type="text" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="提交时间：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.tjrq"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.checker"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.shrq"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="终止人：">
                <el-input style="width:180px;" v-model="orderForm.zzr" type="text" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="终止时间：">
                <el-input
                  style="width:180px;"
                  v-model="orderForm.zzrq"
                  type="text"
                  :disabled="true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div style="margin:10px;"></div>
    </el-form>
    <!-- <div slot="footer" class="buttons-wrap">
      <el-button type="primary" @click="submitForm('orderForm')">保存</el-button>
    </div>-->
  </el-dialog>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    editdata: {
      type: Object
    }
  },
  data() {
    return {
      diatitle: "新增",
      user: JSON.parse(window.sessionStorage.getItem("user")),
      checkboxvalue: this.editdata.xtmr == "1" ? true : false,
      orderForm: JSON.parse(JSON.stringify(this.editdata)),
      addRules: {
        //    qddm: [{ required: true, message: "请选择渠道", trigger: 'change'}],
        //       khdm:[{ required: true, message: "请选择门店或客户", trigger: 'change'}],
        //       sklxDm:[{ required: true, message: "请选择收款类型", trigger: 'change'}],
        //       dhhdm:[{ required: true, message: "请选择订货会", trigger: 'change'}],
        //       fzxx:[{ required: true, message: "请选择分账信息", trigger: 'change'}],
      },
      orderstatuslist: [
        { value: 0, label: "初始" },
        { value: 1, label: "提交" },
        { value: 2, label: "审核" },
        { value: 3, label: "终止" }
      ],
      qdlist: [],
      khlist: [],
      sklxlist: [],
      dhhlist: [],
      fzxxlist: [],
      activeName: "first",
      tableDatadetail: [],
      detaildata: {
        page: 1,
        size: 10,
        total: 0
      },
    };
  },
  created() {
    this.getlistQdlist();
    this.getlistsklxlist();
    this.getlistdhhlist();
    this.getlistfzxxlist();
    this.getdetaillist();
    if (this.orderForm.qddm) {
      this.firstgetmdkelsit(this.orderForm.qddm);
    }
  },
  methods: {
    // 获取渠道列表
    getlistQdlist() {
      this.getRequest("/common/getqd?&page=1&size=100").then(res => {
        if (res) {
          this.qdlist = res.data;
          console.log(res.data);
        }
      });
    },
    // 首次进入是加载 门店客户列表
    firstgetmdkelsit(e) {
      this.getRequest(
        "/common/getmd?&page=1&size=100&qddm=" + this.orderForm.qddm
      ).then(res => {
        if (res) {
          this.khlist = res.data;
          console.log(res.data);
        }
      });
    },
    //  获取门店客户
    qdchange(e) {
      this.orderForm.khdm = "";
      this.getRequest(
        "/common/getmd?&page=1&size=100&qddm=" + this.orderForm.qddm
      ).then(res => {
        if (res) {
          this.khlist = res.data;
          console.log(res.data);
        }
      });
    },
    // sklxlist  首款类型
    getlistsklxlist() {
      this.getRequest("/earnestmoney/sklx/query?&page=1&size=100").then(res => {
        if (res) {
          this.sklxlist = res.data;
          console.log(res.data);
        }
      });
    },
    //  订货会
    getlistdhhlist() {
      this.getRequest("/earnestmoney/dhh/query?&page=1&size=100").then(res => {
        if (res) {
          this.dhhlist = res.data;
          console.log(res.data);
        }
      });
    },
    // 分账信息  getfzxx
    getlistfzxxlist() {
      this.getRequest("/common/getfzxx?&page=1&size=100").then(res => {
        if (res) {
          this.fzxxlist = res.data;
          console.log(res.data);
        }
      });
    },
    deletehander(e) {
      console.log(e);
      this.deleteRequest("/earnestmoney/djsqd/detail/delete/" + e.mxbh).then(
        res => {
          if (res.status == "200") {
            this.getdetaillist();
          }
        }
      );
    },
    getdetaillist() {
      console.log(this.tool.pars(this.detaildata));
      this.detaildata.djbh = this.orderForm.djbh;
      this.getRequest(
        "/earnestmoney/djsqd/detail/query?" + this.tool.pars(this.detaildata)
      ).then(res => {
        if (res) {
          this.tableDatadetail = res.data;
          this.detaildata.total = res.total;
        }
      });
    },
    sizeChange(size) {
      this.detaildata.size = size;
      this.getdetaillist();
    },
    currentChange(page) {
      this.detaildata.page = page;
      this.getdetaillist();
    },
    initForm() {
      this.orderForm = {
        code: "",
        name: "",
        xtmr: "",
        status: "1",
        zdr: "",
        qyr: ""
      };
      if (this.$refs.orderForm) {
        this.$refs.orderForm.resetFields();
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.orderForm);
          this.orderForm.xgr = this.user.name;
          this.postRequest("/earnestmoney/djsqd/update", this.orderForm).then(
            res => {
              console.log(res, "11111");
              if (res.status == "200") {
                this.$parent.getdata();
                this.$emit("update:visible", false);
              }
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    cancelModal() {
      // 关闭弹窗，触发父组件修改visible值
      this.$emit("update:visible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.buttons-wrap {
  .el-button {
    margin-right: 20px;
    min-width: 100px;
  }
}
</style>